{% extends '__base__.html' %}

{% block title %}首页{% endblock %}
{% block content %}
<div class="container">
    {% if mode == 'list' %}
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | slice(loop.length - loop.index + 1) | first | join('/')}}&mode=list">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mkdir">新建文件夹</button>
                <button type="button" class="btn btn-primary"
                    onclick="location.assign('{{ prefix }}/edit?path=/{{ path | join('/') }}')">新建日志</button>
                <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#import">导入</button>
            </div>
        </div>
    </div>
    <div id="mkdir" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入文件名" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div id="import" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <textarea type="text" class="form-control" placeholder="输入导入数据"></textarea>
                    <button class="btn btn-success input-group-append">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="update" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path" readonly>
                    <select class="custom-select" name="status">
                        <!-- <option selected>状态</option> -->
                        <option value="-1">暂停</option>
                        <option value="0">下载中</option>
                        <option value="1">下载完成</option>
                    </select>
                    <!-- <input type="text" class="form-control" name="status" {% if video %}value="{{ video.status }}"{% endif %} placeholder="输入状态"> -->
                    <input type="text" class="form-control" name="referer" placeholder="输入m3u8下载地址">
                    <input type="text" class="form-control" name="poster_referer" placeholder="输入封面下载地址">
                    <input type="text" class="form-control" name="referer_referer" placeholder="输入关联网页">
                    <input type="text" class="form-control" name="url" placeholder="输入播放URI">
                </div>
                <button class="btn btn-success text-center">确定</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md pb-4 table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col" width="6%"><input type="checkbox"></th>
                        <th scope="col" width="50%">名称</th>
                        <th scope="col" width="10%">大小</th>
                        <th scope="col" width="10%">状态</th>
                        <th scope="col" width="24%">修改日期</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in files %}
                    <tr class="item" style="cursor: pointer;" data-path="/{{ path | join('/') }}/{{ item.name }}"
                        data-type="{{ item.content_type }}">
                        <td><input type="checkbox"></td>
                        {% if item.content_type == 'd' %}
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.name }}"><i
                                class="fa fa-folder-o mr-3"></i><a class="btn"
                                href="{{ prefix }}?path=/{{ path | join('/') }}/{{ item.name }}">{{ item.name }}</a>
                        </td>
                        {% elif item.content_type == 'hls' %}
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.name }}"><i
                                class="fa fa-tv mr-3"></i><a {% if item.status != 1 %}class="btn disabled"
                                {% else %}class="btn" {% endif %}
                                href="/video/play?path=/{{ path | join('/') }}/{{ item.name }}"
                                target="_blank">{{ item.name }}</a>
                        </td>
                        {% elif item.content_type == 'blog' %}
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.name }}"><i
                                class="fa fa-book mr-3"></i><a class="btn"
                                href="{{ prefix }}/view?path=/{{ path | join('/') }}/{{ item.name }}"
                                target="_blank">{{ item.name }}</a>
                        </td>
                        {% else %}
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.name }}"><i
                                class="fa fa-tv mr-3"></i><a class="btn"
                                href="{{ prefix }}/view?path=/{{ path | join('/') }}&id={{ item.id }}">{{ item.name }}</a>
                        </td>
                        {% endif %}
                        <td>{% if item.size %}{{ item.size | size_filter }}{% else %}-{% endif %}</td>
                        <td>{{ item.status | status_filter }}</td>
                        <td>{{ item.updated_at | datetime_filter }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div id="popupRC" style="display:none;background-color: rgb(209, 228, 140);width: 13em;"
        class="panel panel-primary">
        <!-- <div class="panel-heading ">Right Click Window</div> -->
        <div class="panel-body">
            <button class="dropdown-item export" type="button">导出</button>
            <button class="dropdown-item update_hls">编辑</button>
        </div>
        <!-- <div class="panel-footer"><input type="button" class="btn" value="close" onClick="$('#popupRC').css({ display: 'none' });"/></div> -->
    </div>
    {% endif %}
    {% if mode == 'video' %}
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page" data-toggle="tooltip" data-placement="top"
                    title="{{ item }}">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | slice(loop.length - loop.index + 1) | first | join('/')}}&mode=list">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#update">编辑</button>
                <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
            </div>
        </div>
    </div>
    <div id="update" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path"
                        {% if video %}value="{{ video.path }}/{{ video.name }}" {% endif %} readonly>
                    <select class="custom-select" name="status">
                        <!-- <option selected>状态</option> -->
                        <option value="-1" {% if video and video.status == -1 %}selected{% endif %}>暂停</option>
                        <option value="0" {% if video and video.status == 0 %}selected{% endif %}>下载中</option>
                        <option value="1" {% if video and video.status == 1 %}selected{% endif %}>下载完成</option>
                    </select>
                    <!-- <input type="text" class="form-control" name="status" {% if video %}value="{{ video.status }}"{% endif %} placeholder="输入状态"> -->
                    <input type="text" class="form-control" name="referer" {% if video %}value="{{ video.referer }}"
                        {% endif %} placeholder="输入m3u8下载地址">
                    <input type="text" class="form-control" name="poster_referer"
                        {% if video %}value="{{ video.poster_referer }}" {% endif %} placeholder="输入封面下载地址">
                    <input type="text" class="form-control" name="referer_referer"
                        {% if video %}value="{{ video.referer_referer }}" {% endif %} placeholder="输入关联网页">
                    <input type="text" class="form-control" name="url" {% if video %}value="{{ video.url }}" {% endif %}
                        placeholder="输入播放URI">
                </div>
                <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10 offset-1" id="player" {% if video.url %}data-url={{ video.url }}{% endif %}>
        </div>
    </div>
    {% endif %}

    {% if mode == 'blog_view' %}
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page" data-toggle="tooltip" data-placement="top"
                    title="{{ item }}">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | slice(loop.length - loop.index + 1) | first | join('/')}}&mode=list">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary"
                    onclick="location.assign('{{ prefix }}/edit?path=/{{ path | join('/') }}&id={{ blog.id }}')">编辑</button>
                <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
            </div>
        </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="edit" class="col-6" style="display:none;height: 50vh;background-color: rgb(251, 241, 227);">
            <textarea name="content"
                style="width: 100%;height: 100%;resize: none;">{% if blog.content %}{{ blog.content }}{% endif %}</textarea>
        </div>
        <div id="view" class="col-12"
            style="height: 50vh;background-color: rgba(153, 245, 191, 0.98);overflow-y: scroll;"></div>
        <input class="col-7 mt-1" name="name" placeholder="日志名称" disabled {% if blog.name %}value="{{ blog.name }}"
            {% endif %}>
        <textarea class="col-7 mt-2" name="summary" cols="3" placeholder="摘要" style="resize: none;"
            disabled>{% if blog.summary %}{{ blog.summary }}{% endif %}</textarea>
    </div>
    {% endif %}
    {% if mode == 'blog_edit' %}
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}/view?path=/{{ path | slice(loop.length - loop.index + 1) | first | join('/')}}">{{ item }}</a>
                </li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | slice(loop.length - loop.index + 1) | first | join('/')}}&mode=list">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" id="save" class="btn btn-primary" data-path="/{{ path | join('/') }}">保存</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="edit" class="col-6" style="height: 50vh;background-color: rgb(251, 241, 227);">
            <textarea name="content"
                style="width: 100%;height: 100%;resize: none;">{% if blog.content %}{{ blog.content }}{% endif %}</textarea>
        </div>
        <div id="view" class="col-6"
            style="height: 50vh;background-color: rgba(153, 245, 191, 0.98);overflow-y: scroll;"></div>
        <input class="col-7 mt-1" name="name" placeholder="日志名称" {% if blog.name %} value="{{ blog.name }}" {% endif %}>
        <textarea class="col-7 mt-2" name="summary" cols="3" placeholder="摘要"
            style="resize: none;">{% if blog.summary %}{{ blog.summary }}{% endif %}</textarea>
        {% if blog.id %}
        <input type="hidden" name="id" value="{{ blog.id }}">
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block beforebody %}
{% if mode == 'list' %}
<script>
    // 新建文件夹
    document.querySelector('#mkdir button').addEventListener('click', event => {
        let el = event.target
        let parent = el.dataset["path"]
        let name = el.parentNode.querySelector('input').value
        axios.get('{{ prefix }}/mkdir/' + name, {
            params: {
                parent: parent,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('{{ prefix }}?path=' + data['msg'])
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 导出
    document.querySelectorAll('.export').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset["path"]
            axios.get('/file/export', {
                params: {
                    fullpath: fullpath,
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                        }
                        document.querySelector('#export .modal-content textarea').innerHTML = data['msg']
                        // onpropertychange= "this.style.posHeight=this.scrollHeigh
                        $('#export').modal('show')
                        console.log(document.querySelector('#export .modal-content textarea').scrollHeight)
                        console.log(document.querySelector('#export .modal-content textarea').style.posHeight)
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
    // 导入
    document.querySelector('#import button').addEventListener('click', function (event) {
        let data = event.target.parentNode.querySelector('textarea').value
        axios.post('/file/import', {
            data: data,
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/file')
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    $("table .item").bind('contextmenu', function (event) {
        event.preventDefault(); // prevents default menu
        let el = event.target
        while (el.tagName !== 'TR') {
            el = el.parentNode
        }
        let path = el.dataset['path']
        let type = el.dataset['type']
        document.querySelector('#popupRC .export').dataset['path'] = el.dataset['path']

        $('#popupRC .update_hls').css('display', 'none')
        if (type == 'hls') {
            $('#popupRC .update_hls').css('display', 'block')
            document.querySelector('#popupRC .update_hls').dataset['path'] = el.dataset['path']
        }
        $("#popupRC").css({ position: "absolute", top: event.pageY, left: event.pageX, display: "block" });
    })
    // 关闭文件操作
    document.querySelector('main').addEventListener('click', () => {
        $('#popupRC').css({ display: 'none' });
    }, false)
    document.querySelector('#popupRC .update_hls').addEventListener('click', function (event) {
        let el = event.target
        let fullpath = el.dataset['path']
        if (!fullpath) return
        axios.get('/file/getfile', {
            params: {
                fullpath: fullpath
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg']['path'])
                        document.querySelector('#update input[name=path]').value = data['msg']['path']
                        document.querySelector('#update select[name=status]').value = data['msg']['status']
                        document.querySelector('#update input[name=referer]').value = data['msg']['referer']
                        document.querySelector('#update input[name=poster_referer]').value = data['msg']['poster_referer']
                        document.querySelector('#update input[name=referer_referer]').value = data['msg']['referer_referer']
                        document.querySelector('#update input[name=url]').value = data['msg']['url']
                        $('#update').modal('show')
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }, false)
    // 修改[确定]按钮
    document.querySelector('#update .modal-content button.btn-success').addEventListener('click', function (event) {
        let path = document.querySelector('#update .modal-content input[name="path"]').value
        let status = document.querySelector('#update .modal-content select[name="status"]').value
        let referer = document.querySelector('#update .modal-content input[name="referer"]').value
        let referer_referer = document.querySelector('#update .modal-content input[name="referer_referer"]').value
        let poster_referer = document.querySelector('#update .modal-content input[name="poster_referer"]').value
        let url = document.querySelector('#update .modal-content input[name="url"]').value
        axios.get('/file/update', {
            params: {
                path: path,
                status: status,
                referer: referer,
                referer_referer: referer_referer,
                poster_referer: poster_referer,
                url: url,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/file?path=' + path.split('/').slice(0, -1).join('/'))
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
</script>
{% endif %}
{% if mode == 'video' %}
<script>
    let url = document.querySelector('#player').dataset['url']
    if (url) {
        video(url, '#player')
    }
    function video(url, el) {
        let src = '{{ hlsurl }}/' + url
        let video = document.createElement('video')
        video.controls = "controls"
        video.style = 'object-fit: contain;max-height: 65vh;width: 100%;background-color: #000'
        let hls = new Hls();
        hls.loadSource(src);
        hls.attachMedia(video);
        // hls.on(Hls.Events.MANIFEST_PARSED, function () {
        //     video.muted = true
        //     video.play();
        // });
        document.querySelector(el).append(video)
    }
    // 修改[确定]按钮
    document.querySelector('#update .modal-content button.btn-success').addEventListener('click', function (event) {
        let path = document.querySelector('#update .modal-content input[name="path"]').value
        let status = document.querySelector('#update .modal-content select[name="status"]').value
        let referer = document.querySelector('#update .modal-content input[name="referer"]').value
        let referer_referer = document.querySelector('#update .modal-content input[name="referer_referer"]').value
        let poster_referer = document.querySelector('#update .modal-content input[name="poster_referer"]').value
        let url = document.querySelector('#update .modal-content input[name="url"]').value
        axios.get('/file/update', {
            params: {
                path: path,
                status: status,
                referer: referer,
                referer_referer: referer_referer,
                poster_referer: poster_referer,
                url: url,
            }
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log('SUCCESS: ' + data['msg'])
                        location.assign('/video/play?path=' + data['msg'])
                    } else {
                        console.log('FAILED: ' + data['msg'])
                        alert(data['msg'])
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    // 导出
    document.querySelectorAll('.export').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset["path"]
            axios.get('/file/export', {
                params: {
                    fullpath: fullpath,
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                        }
                        document.querySelector('#export .modal-content textarea').innerHTML = data['msg']
                        // onpropertychange= "this.style.posHeight=this.scrollHeigh
                        $('#export').modal('show')
                        console.log(document.querySelector('#export .modal-content textarea').scrollHeight)
                        console.log(document.querySelector('#export .modal-content textarea').style.posHeight)
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
</script>
{% endif %}
{% if mode == 'blog_view' %}
<script src="{{ static_url }}/showdown/showdown.js"></script>
<script>
    let edit = document.querySelector('#edit textarea')
    let view = document.querySelector('#view')
    let save = document.querySelector('#save')
    let text = edit.value
    let converter = new showdown.Converter();
    let html = converter.makeHtml(text);
    view.innerHTML = html;
    // 导出
    document.querySelectorAll('.export').forEach(el => {
        el.addEventListener('click', function (event) {
            let fullpath = event.target.dataset["path"]
            axios.get('/file/export', {
                params: {
                    fullpath: fullpath,
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                        }
                        document.querySelector('#export .modal-content textarea').innerHTML = data['msg']
                        // onpropertychange= "this.style.posHeight=this.scrollHeigh
                        $('#export').modal('show')
                        console.log(document.querySelector('#export .modal-content textarea').scrollHeight)
                        console.log(document.querySelector('#export .modal-content textarea').style.posHeight)
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
    })
</script>
{% endif %}
{% if mode == 'blog_edit' %}
<script src="{{ static_url }}/showdown/showdown.js"></script>
<script>
    function text2html(text) {
        let converter = new showdown.Converter();
        return converter.makeHtml(text);
    }
</script>
<script>
    let edit = document.querySelector('#edit textarea')
    let view = document.querySelector('#view')
    let save = document.querySelector('#save')
    if (edit.value.length > 0) {
        view.innerHTML = text2html(edit.value);
    }
    if (edit) {
        edit.addEventListener('keyup', function (event) {
            view.innerHTML = text2html(event.target.value);
        }, false)
    }
    if (save) {
        save.addEventListener('click', function (event) {
            let content = document.querySelector('#edit').parentNode.querySelector('[name=content]').value
            let name = document.querySelector('#edit').parentNode.querySelector('[name=name]').value
            let summary = document.querySelector('#edit').parentNode.querySelector('[name=summary]').value
            let path = event.target.dataset['path']
            if (!document.querySelector('#edit').parentNode.querySelector('[name=id]')) {
                path += '/' + name
            }
            axios.post('/file/edit', {
                content: content,
                name: name,
                summary: summary,
                path: path,
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            location.assign('/file/view?path=' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }, false)
    }
</script>
{% endif %}
{% endblock %}